<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
</head>

<body>
<h1>司机：监听页面测试-模拟监听客户端</h1>
<button onclick="setMessageContent('鼠标点我了')">测试message</button>
<div id="message">展示服务端推送过来的消息</br></div>
<button onclick="sourceClose()">关闭连接</button>

<script>
    userId="1631130415052435458";
    identity = 1;
    source = null;

    if(window.EventSource){
        console.info("此浏览器支持SSE");
        // 连接的建立
        source = new EventSource("http://localhost:9000/connect?userId="+userId+"&identity="+identity);

        // 监听服务的推送的消息
        source.addEventListener("message",function (e){
            content = e.data;
            console.info("消息内容："+content);

            setMessageContent(content);
        });

    }else {
        setMessageContent("此浏览器不支持");
    }

    function setMessageContent(content){
        document.getElementById("message").innerHTML+= (content+'</br>');
    }

    function sourceClose(){
        console.info("close方法执行");
        // 客户端source的关闭
        source.close();
        // 服务端map的移除
        httpRequest = new XMLHttpRequest();
        httpRequest.open("get","http://localhost:9000/close?userId="+userId+"&identity="+identity);
        httpRequest.send();
    }
</script>
</body>
</html>
